<template>
  <div>
    <div class="top-second-wrap">
      <div class="top-second-inner-wrap">
        <div class="breadcrumb-wrap">
          <bread-crumb></bread-crumb>
        </div>
      </div>

    </div>

    <div class="main-container">

      <SkyPanel title="注册信息">
        <template v-slot:main>

          <SkyMatrix>
            <SkyMatrixRow>
              <SkyMatrixCol title="用户名">苏志冬</SkyMatrixCol>
              <SkyMatrixCol title="登录名">telehot</SkyMatrixCol>
            </SkyMatrixRow>
            <SkyMatrixRow>
              <SkyMatrixCol title="手机号">13813641197</SkyMatrixCol>
              <SkyMatrixCol title="邮箱">telehot@163.com</SkyMatrixCol>
            </SkyMatrixRow>
            <SkyMatrixRow>
              <SkyMatrixCol title="授权委托书">授权委托书.pdf</SkyMatrixCol>
            </SkyMatrixRow>
          </SkyMatrix>

        </template>
      </SkyPanel>

      <SkyPanel title="表格">
        <template v-slot:main>

          <SkyTable v-slot="row" :data="data">
            <SkyColumn :row="row.scope" prop="name" label="姓名"></SkyColumn>
            <SkyColumn :row="row.scope" prop="age" label="年龄"></SkyColumn>
            <SkyColumn :row="row.scope" prop="home" label="家庭住址"></SkyColumn>
          </SkyTable>

        </template>
      </SkyPanel>

    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import BreadCrumb from "@/components/bread-crumb/Index.vue";

  export default defineComponent({
    // setup() {
    // },
    data() {
      return {
        data: [
          { name: "szdew", age: 21, home: "中南海" },
          { name: "szwrde", age: 21, home: "中南海" },
          { name: "szwrde", age: 21, home: "中南海" },
          { name: "szwrde", age: 21, home: "中南海" },
          { name: "szwrde", age: 21, home: "中南海" },
        ],
      };
    },
    components: {
      BreadCrumb,
    },

    SkyColumnta() {
      return {
        activeName: "first",
      };
    },
    methods: {
      // eslint-disable-next-line @typescript-eslint/no-empty-function
      handleClick() {},
    },
  });
</script>


<style lang="scss" scoped>
.main-container {
  padding: 20px 0;
}
.top-second-wrap {
  background: white;
  .top-second-inner-wrap {
    width: 1164px;
    margin: 0 auto;
    .breadcrumb-wrap {
    }
  }

  // /deep/ .el-tabs__nav-wrap::after {
  //   background-color: unset;
  // }
  // /deep/ .el-tabs__header {
  //   margin: unset;
  //   height: 60px;
  //   line-height: 60px;
  // }
}

.main-container {
  width: 1164px;
  margin: 0 auto;
}
</style>